<template>
  <div id="login_contanir">
    <div class="login_box">
      <div class="login_logo">
        <img src="../assets/logo.png" alt="">
      </div>
      <el-form label-width="0px" ref="formRef" :model="form" :rules="formRules" class="form_input">
        <el-form-item prop="name">
          <el-input v-model="form.name" prefix-icon="iconfont icon-Shapecopy"></el-input>
        </el-form-item>
         <el-form-item prop="password">
          <el-input type="password" v-model="form.password" prefix-icon="iconfont icon-mima1"></el-input>
        </el-form-item>
        <!-- 按钮控件 -->
        <div class="btns">
        <el-button type="success" @click="handleSubmit">提交</el-button>
        <el-button type="info" @click="handleReset">重置</el-button>
      </div>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {
        name: 'zs',
        password: '123456'
      },
      formRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入用户密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交按钮
    handleSubmit () {
      // 提交之前验证表单是否合法 使用validate() validate方法中有一个回调函数 其中val为boolean 值
      this.$refs.formRef.validate((val) => {
        console.log(val)
      })
    },
    // 重置按钮
    handleReset () {
      // 重置表单为初始化值 使用resetFields() 方法重置
      this.$refs.formRef.resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
  #login_contanir {
    background-color: #4b5b6b;
    height: 100%;
    .login_box {
      width: 500px;
      height: 350px;
      border: 1px solid #eee;
      border-radius: 10px;
      background-color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%)
    }
    .login_logo {
        width:150px;
        height: 150px;
        background-color: #fff;
        border-radius: 50%;
        padding: 10px;
        position: absolute;
        left: 50%;
        transform: translate(-50%,-50%);
        box-shadow: 0 0 10px #eee;
        img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
    }
    .form_input {
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
    .btns {
      display: flex;
      justify-content: flex-end;
    }
    }
  }
</style>
